<template>
    <el-row :gutter="24">
      <el-col :xs="12" :sm="12" :lg="6">
        <div class="bordercard-panel" shadow='never'>
          <div class="card-panel-icon-wrapper3 icon-people">
            <svg-icon icon-class="assetIco" class="assetIco" style="font-size:54px"></svg-icon>
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">
              资产总数
            </div>
            <div style="display:flex">
              <count-to :start-val="0" :end-val="parseInt(Device.DeviceCount) || 0"  class="card-panel-num" />
              <!-- <span class="card-panel-num2">/</span>
              <count-to :start-val="0" :end-val="parseInt(DataSystemInfoList.OnlineCount + DataSystemInfoList.OfflineCount) || 0"  class="card-panel-num2" /> -->
            </div>
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6">
        <div class="bordercard-panel" shadow='never'>
          <div class="card-panel-icon-wrapper3 icon-message">
            <svg-icon icon-class="eventIco" class="eventIco" style="font-size:54px"></svg-icon>
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">
              资产组数
            </div>
            <div style="display:flex">
              <count-to :start-val="0" :end-val="parseInt(Device.DeviceGroupCount)|| 0"  class="card-panel-num" />
            </div>
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6">
        <div class="bordercard-panel" shadow='never'>
          <div class="card-panel-icon-wrapper3 icon-money">
            <svg-icon icon-class="logIco" class="logIco" style="font-size:54px"></svg-icon>
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">
              服务器数
            </div>
            <div style="display:flex">
              <count-to :start-val="0" :end-val="parseInt(Device.ServerDeviceCount)|| 0"  class="card-panel-num" />
            </div>
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6">
        <div class="bordercard-panel" shadow='never'>
          <div class="card-panel-icon-wrapper3 icon-shopping">
            <svg-icon icon-class="saveIco" class="saveIco" style="font-size:54px"></svg-icon>
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">
              终端总数
            </div>
            <div style="display:flex">
              <count-to :start-val="0" :end-val="parseInt(Device.TerminalsCount)|| 0"  class="card-panel-num" />
            </div>
          </div>
        </div>
      </el-col>
      <!-- <el-col :xs="12" :sm="12" :lg="6">
        <div class="bordercard-panel" shadow='never'>
          <div class="card-panel-icon-wrapper3 icon-shopping">
            <svg-icon icon-class="saveIco" class="saveIco" style="font-size:54px"></svg-icon>
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">
              终端数
            </div>
            <div style="display:flex">
              <count-to :start-val="0" :end-val="parseInt(Device.AlarmLogCount)|| 0"  class="card-panel-num" />
            </div>
          </div>
        </div>
      </el-col> -->
    </el-row>
</template>

<script>
import CountTo from 'vue-count-to'
export default {
  components: {
    CountTo
  },
  props:{
    Device:{}
  },
  data(){
    return {}
  },
  created(){},
  methods: {}
}
</script>

<style lang="scss" scoped>
.bordercard-panel{
    height: 78px;
    // width: 400px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0px 20px;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    color: white;
    background: #fff;
    box-shadow: 4px 4px 20px rgba(0, 0, 0, .05);
    border-color: rgba(0, 0, 0, .05);

    .icon-people {
      color: #40c9c6;
      background: #fff8e5;
      border-radius: 10px;
    }

    .icon-message {
      color: #36a3f7;
      background: #e7faf3;
      border-radius: 10px;
    }

    .icon-money {
      color: #f4516c;
      background: #e5f1ff;
      border-radius: 10px;
    }

    .icon-shopping {
      color: #a834bf;
      background: #fff2ed;
      border-radius: 10px;
    }

    .card-panel-icon-wrapper {
      float: left;
      padding: 5px;
      transition: all 0.38s ease-out;
      border-radius: 6px;
    }

    .card-panel-icon {
      float: left;
      font-size: 20px;
    }

    .card-panel-description {
      height: 40px;
      display: flex;
      align-items: center;
      // font-weight: bold;
      // margin: 5px;
      margin-left: 0px;
      margin-top: 30px;
      .card-panel-text {
        line-height: 14px;
        margin-right: 15px;
        color: #36a3f7;
        font-size: 16px;
      }
      .card-panel-num {
        color: #36a3f7;
        font-size: 50px;
        margin-bottom: 15px;
        // margin-right: 10px;
      }
      .card-panel-num2 {
        color: #36a3f7;
        font-size: 35px;
        margin-top: 15px;
        // margin-right: 10px;
      }
    }
}
</style>